<template>
  <poputLayout
    @closeWindow="closeWindow"
    title="记账明细"
    @search="search"
    :isDept="true"
    :isTime="true"
    :isProject="true"
  >
    <div class="body-conatiner">
      <div class="list">
        <div class="table">
          <myTable :todayList="todayList"/>
        </div>
        <div class="page">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[10, 100, 200, 300, 400]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          >
          </el-pagination>
        </div>
      </div>
    </div>
  </poputLayout>
</template>

<script>
import poputLayout from "../../popup-layout";
import request from "@/utils/request";
import Qs from "qs";
import myTable from "./table.vue";
export default {
  components: {
    poputLayout,
    myTable,
  },
  data() {
    return {
      form: {},
      pageNum: 1,
      pageSize: 10,
      total: 0,
      currentPage: 1,
      todayList:[],
    };
  },
  mounted() {},
  methods: {
    search(val) {
      // console.log(val)
      this.form = val;
      this.getDate1();
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pageSize = val;
      this.getDate1();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.pageNum = val;
      this.getDate1();
    },
    getDate1() {
      request({
        url: "system/screen/flowRecorder",
        method: "post",
        headers: { "content-type": "application/x-www-form-urlencoded" },
        data: Qs.stringify({
          // accountTime: this.accountTime,
          startTime: this.form.time[0],
          endTime: this.form.time[1],
          deptId: this.form.deptId || -1,
          pageNum: this.pageNum,
          pageSize: this.pageSize,
          projectId: this.form.projectId,
        }),
      }).then((res) => {
        this.todayList = res.rows;
        this.total = res.total;
      });
    },
  },
};
</script>

<style lang="scss" scoped>
@import "@/views/report_form_dark/styles/fn.scss";

.body-conatiner {
  width: vw(1136);
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-around;
  align-content: space-around;

  .list {
    width: vw(1100);

    background: #002463;
    border-radius: vw(4);
    margin: vh(40) 0 vh(10) 0;
    // padding: 0 vw(20);

    .table {
      width: 100%;
      // height: vh(289);
    }

    .page {
      width: 100%;
      display: flex;
      flex-direction: row;
      justify-content: flex-end;
      padding: vh(10);

      ::v-deep {
        .el-pagination {
          .el-pagination__total {
            font-size: vw(14);
            font-family: Microsoft YaHei UI;
            font-weight: 400;
            color: #8fc7ff;
            opacity: 0.65;
          }

          .el-pagination__sizes {
            background: rgba(0, 80, 171, 0.4);

            .el-select,
            .el-input,
            input {
              background: rgba(0, 80, 171, 0.4);
              border: 0;
              font-size: vw(14);
              font-family: Microsoft YaHei UI;
              font-weight: 400;
              color: #8fc7ff;
            }
          }

          .btn-prev,
          .btn-next {
            background: rgba(0, 80, 171, 0.4);
            font-size: vw(14);
            font-family: Microsoft YaHei UI;
            font-weight: 400;
            color: #8fc7ff;
          }
          .el-pager {
            // background: rgba(0, 80, 171, 0.4);

            .number,.el-icon {
              background: rgba(0, 80, 171, 0.4);
              color: rgba(143, 199, 255, 0.6);

              &.active {
                color: rgba(143, 199, 255, 1);
              }
            }
          }

          .el-pagination__jump {
            font-size: vw(14);
            font-family: Microsoft YaHei UI;
            font-weight: 400;
            color: #8fc7ff;

            input {
              background: rgba(0, 80, 171, 0.4);
              border: 0;
              font-size: vw(14);
              font-family: Microsoft YaHei UI;
              font-weight: 400;
              color: #8fc7ff;
            }
          }
        }
      }
    }
  }
}
</style>